import React from 'react';
import {
    View,
    ScrollView,
    StyleSheet,
    TouchableOpacity,
    Platform,
    Dimensions,
    Image
}
    from 'react-native';

import PropTypes from 'prop-types';

import Label from '../label';
import Color from '../../config/theme/standard/color';
import Fonts from '../../config/theme/standard/fonts';


class BottomButtonContainer extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            activeColor: Color.bottomButton.addTitle,
            activeBorderColor: Color.bottomButton.addPressBorder,
            activeColorAdd: Color.bottomButton.addBackground,
            isShowButton: true,
            activeBorderWidth: 0
        }
    }
    componentDidMount() {
        // 适配鸿蒙折叠屏动态更新组件
        this.addEventListenerScreenWidth = Dimensions.addEventListener('change', this.setIsWideScreen)
    }
    componentWillUnmount() {
        // 适配鸿蒙折叠屏动态更新组件
        if (this.addEventListenerScreenWidth) {
            this.addEventListenerScreenWidth = null
        }
    }
    setIsWideScreen = () => {
        const screenWidth = Dimensions.get('window').width;
        if (screenWidth) {
            this.forceUpdate()
        }
    }
    _onPress() {
        if (typeof this.props.onPress == 'function') {
            this.props.onPress(this.props.title);
        }
    }

    _onPressAdd() {
        if (typeof this.props.onPressAdd == 'function') {
            this.props.onPressAdd(this.props.titleAdd);
        }
    }

    _onPressIn() {
        if (!this.props.disabled) {
            this.setState({ activeColor: Color.bottomButton.press });
        }
    }

    _onPressInAdd() {
        if (!this.props.disabledAdd) {
            this.setState({ activeColorAdd: Color.bottomButton.addPress, activeBorderColor: Color.bottomButton.addPressBorder, activeBorderWidth: 1 });
        }
    }

    _onPressOut() {
        if (!this.props.disabled) {
            this.setState({ activeColor: Color.bottomButton.background });
        }
    }

    _onPressOutAdd() {
        if (!this.props.disabledAdd) {
            this.setState({ activeColorAdd: Color.bottomButton.addBackground, activeBorderColor: Color.bottomButton.addBackground, activeBorderWidth: 0 });
        }
    }

    _close = () => {
        this.setState({
            isShowButton: false
        })
    }

    _open = () => {
        this.setState({
            isShowButton: true
        })
    }


    render() {

        const { title, titleAdd, size, disabled, disabledAdd, isRadius, isTwo, scrollHeight, children, btnStyle, btnAddStyle } = this.props;
        const sWidth = Dimensions.get('window').width;
        const buttonStyles = [styles.button, { width: sWidth }];
        const buttonRadiusStyles = [styles.buttonRadius, { width: sWidth - 6 }];
        const addStyles = [styles.add];
        const containerStyles = [styles.container];
        const buttonSecondaryStyles = [styles.buttonSecondary, { width: sWidth / 2 }];

        let addButton = null;

        let { activeColor, activeBorderColor, activeColorAdd, isShowButton, activeBorderWidth } = this.state;

        switch (size) {
            case 'normal':
                containerStyles.push({ width: 0 });
                break;

            case 'middle':
                if (isTwo) {
                    if (isRadius) {
                        if (children) {
                            buttonRadiusStyles.push({ width: (sWidth - 6) / 375 * 160 });
                            buttonSecondaryStyles.push({ width: (sWidth - 6) / 375 * 160, height: 40, borderRadius: 20, marginRight: 3 });
                        } else {
                            buttonRadiusStyles.push({ width: (sWidth - 9) / 2 });
                            buttonSecondaryStyles.push({ width: (sWidth - 9) / 2, height: 40, borderRadius: 20, marginRight: 3 });
                        }
                        addButton = (
                            <TouchableOpacity
                                activeOpacity={1}
                                disabled={disabledAdd}
                                onPressIn={() => this._onPressInAdd()}
                                onPressOut={() => this._onPressOutAdd()}
                                onPress={this._onPressAdd.bind(this)}
                            >
                                <View style={[buttonSecondaryStyles, { backgroundColor: disabledAdd ? Color.bottomButton.disable : activeColorAdd, borderColor: disabledAdd ? Color.bottomButton.disable : Color.bottomButton.addTitle, borderWidth: 1 }]}>
                                    {this.props.buttonImage[1] ? <Image style={styles.image} source={disabledAdd ? this.props.buttonImageDisable[1] : this.props.buttonImage[1]} /> : null}
                                    <Label text={titleAdd} labelStyle={{ color: disabledAdd ? Color.bottomButton.disableTitle : Color.bottomButton.addTitle, fontSize: Fonts.bottomButton.titleAddFontSize }} textAlign={'center'} numberOfLines={2} />
                                </View>
                            </TouchableOpacity>
                        );
                    } else {
                        if (children) {
                            buttonStyles.push({ width: sWidth / 375 * 160 });
                            buttonSecondaryStyles.push({ width: sWidth / 375 * 160 });
                        } else {
                            buttonStyles.push({ width: sWidth / 2 });
                        }
                        addButton = (
                            <TouchableOpacity
                                activeOpacity={1}
                                disabled={disabledAdd}
                                onPressIn={() => this._onPressInAdd()}
                                onPressOut={() => this._onPressOutAdd()}
                                onPress={this._onPressAdd.bind(this)}
                            >
                                <View style={[buttonSecondaryStyles, { backgroundColor: disabledAdd ? Color.bottomButton.disable : activeColorAdd, borderColor: disabledAdd ? Color.bottomButton.disable : activeBorderColor, borderTopWidth: activeBorderWidth }]}>
                                    {this.props.buttonImage[1] ? <Image style={styles.image} source={disabledAdd ? this.props.buttonImageDisable[1] : this.props.buttonImage[1]} /> : null}
                                    <Label text={titleAdd} labelStyle={{ color: disabledAdd ? Color.bottomButton.disableTitle : Color.bottomButton.addTitle, fontSize: Fonts.bottomButton.titleAddFontSize }} textAlign={'center'} numberOfLines={2} />
                                </View>
                            </TouchableOpacity>
                        );
                    }
                    if (children) {
                        containerStyles.push({ width: sWidth / 375 * 55 });
                    } else {
                        containerStyles.push({ width: 0 });
                    }
                    break;
                } else {
                    if (isRadius) {
                        buttonRadiusStyles.push({ width: sWidth / 375 * 160 });
                        containerStyles.push({ width: sWidth / 375 * 215 - 3 });
                    }
                    buttonStyles.push({ width: sWidth / 375 * 160 });
                    containerStyles.push({ width: sWidth / 375 * 215 });
                    break;
                }

            case 'small':
                if (isTwo) {
                    if (isRadius) {
                        buttonRadiusStyles.push({ width: sWidth / 375 * 110, borderTopLeftRadius: 0, borderBottomLeftRadius: 0 });
                        addButton = (
                            <TouchableOpacity
                                activeOpacity={1}
                                disabled={disabledAdd}
                                onPressIn={() => this._onPressInAdd()}
                                onPressOut={() => this._onPressOutAdd()}
                                onPress={this._onPressAdd.bind(this)}
                            >
                                <View style={[buttonRadiusStyles, addStyles, { backgroundColor: disabledAdd ? Color.bottomButton.disable : activeColorAdd, borderColor: disabledAdd ? Color.bottomButton.disable : Color.bottomButton.addPressBorder, borderWidth: 1 }]}>
                                    {this.props.buttonImage[1] ? <Image style={styles.image} source={disabledAdd ? this.props.buttonImageDisable[1] : this.props.buttonImage[1]} /> : null}
                                    <Label text={titleAdd} labelStyle={{ color: disabledAdd ? Color.bottomButton.disableTitle : Color.bottomButton.addTitle, fontSize: Fonts.bottomButton.titleAddFontSize }} textAlign={'center'} numberOfLines={2} />
                                </View>
                            </TouchableOpacity>
                        );
                        addStyles.push({ marginRight: 0, borderTopLeftRadius: 20, borderBottomLeftRadius: 20, borderTopRightRadius: 0, borderBottomRightRadius: 0 });
                        containerStyles.push({ width: sWidth / 375 * 155 - 3 });
                    } else {
                        buttonStyles.push({ width: sWidth / 375 * 110 });
                        addButton = (
                            <TouchableOpacity
                                activeOpacity={1}
                                disabled={disabledAdd}
                                onPressIn={() => this._onPressInAdd()}
                                onPressOut={() => this._onPressOutAdd()}
                                onPress={this._onPressAdd.bind(this)}
                            >
                                <View style={[buttonStyles, { backgroundColor: disabledAdd ? Color.bottomButton.disable : activeColorAdd, borderColor: disabledAdd ? Color.bottomButton.disable : activeBorderColor, borderTopWidth: activeBorderWidth }]}>
                                    {this.props.buttonImage[1] ? <Image style={styles.image} source={disabledAdd ? this.props.buttonImageDisable[1] : this.props.buttonImage[1]} /> : null}
                                    <Label text={titleAdd} labelStyle={{ color: disabledAdd ? Color.bottomButton.disableTitle : Color.bottomButton.addTitle, fontSize: Fonts.bottomButton.titleAddFontSize }} textAlign={'center'} numberOfLines={2} />
                                </View>
                            </TouchableOpacity>
                        );
                        containerStyles.push({ width: sWidth / 375 * 155 });
                    }

                } else {
                    if (isRadius) {
                        buttonRadiusStyles.push({ width: sWidth / 375 * 110 });
                        containerStyles.push({ width: sWidth / 375 * 265 - 3 });
                    } else {
                        buttonStyles.push({ width: sWidth / 375 * 110 });
                        containerStyles.push({ width: sWidth / 375 * 265 });
                    }
                }
                break;

            default:
                break;
        }

        if (disabled) {
            buttonStyles.push({ backgroundColor: Color.bottomButton.disable });
            buttonRadiusStyles.push({ backgroundColor: Color.bottomButton.disable });
        }
        if (disabledAdd) {
            addStyles.push({ backgroundColor: Color.bottomButton.disable });
        }

        let content = null;


        if (children && size != "normal") {
            if (btnStyle) {
                content = (<View>{children}</View>)
            } else {
                content = (<View style={containerStyles}>{children}</View>)
            }
        }

        return (
            <View>
                {
                    isShowButton ? (
                        <View style={[styles.container_fixed, { bottom: 0 }, Platform.OS == 'harmony' &&{ zIndex:1 }]}>
                            {content}
                            {addButton}
                            <TouchableOpacity activeOpacity={1} onPress={this._onPress.bind(this)} disabled={disabled} onPressIn={() => this._onPressIn()} onPressOut={() => this._onPressOut()}>
                                <View style={[isRadius ? buttonRadiusStyles : buttonStyles, { backgroundColor: disabled ? Color.bottomButton.disable : activeColor }, btnStyle]}>
                                    {this.props.buttonImage[0] ? <Image style={styles.image} source={disabled ? this.props.buttonImageDisable[0] : this.props.buttonImage[0]} /> : null}
                                    <Label text={title} labelStyle={{ color: disabled ? Color.bottomButton.disableTitle : Color.bottomButton.title, fontSize: Fonts.bottomButton.titleFontSize }} textAlign={'center'} numberOfLines={2} />
                                </View>
                            </TouchableOpacity>
                        </View>
                    ) : null
                }
            </View>

        );


    }
}

const styles = StyleSheet.create({
    container_fixed: {
        flexDirection: 'row',
        justifyContent: 'flex-end',
        alignItems: 'center',
        height: 50,
        position: 'absolute',
        left: 0,
        right: 0,
    },
    button: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 0,
        height: 50,
        paddingHorizontal: 10,
    },
    buttonRadius: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 20,
        height: 40,
        marginRight: 3,
        paddingHorizontal: 10,
    },
    buttonSecondary: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        height: 50,
        borderTopWidth: 1,
        backgroundColor: Color.white,
        paddingHorizontal: 10,
    },
    image: {
        width: 28,
        height: 28,
        resizeMode: 'contain',
        marginRight: 4,
    }
});

BottomButtonContainer.propTypes = {
    title: PropTypes.string,
    //右边按钮文字
    titleAdd: PropTypes.string,
    //左边按钮文字
    onPress: PropTypes.func,
    //右边按钮点击事件
    onPressAdd: PropTypes.func,
    //左边按钮点击事件
    size: PropTypes.oneOf(['small', 'middle', 'normal']),
    //按钮尺寸
    disabled: PropTypes.bool,
    //右边按钮禁用状态
    disabledAdd: PropTypes.bool,
    //左边按钮禁用状态
    isRadius: PropTypes.bool,
    //是否圆角按钮
    isTwo: PropTypes.bool,
    //是否两个按钮横向排布
    btnStyle: PropTypes.object,
    destroy: PropTypes.func,
    //传入图片
    buttonImage: PropTypes.any,
    //传入图片(禁用)
    buttonImageDisable: PropTypes.any
};

BottomButtonContainer.defaultProps = {
    title: '',
    titleAdd: '',
    onPress: null,
    onPressAdd: null,
    size: 'normal',
    disabled: false,
    disabledAdd: false,
    isRadius: false,
    isTwo: false,
    scrollHeight: 0,
    renderCell: null,
    btnStyle: {},
    destroy: () => { },
    buttonImage: [],
    buttonImageDisable: [],
};

module.exports = BottomButtonContainer;
